import tinycolor from 'tinycolor2'

import * as echarts from 'echarts'
const theme = {
  themeD:
        {
          color: [
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: tinycolor('#A6FFDD').setAlpha(1).toString()
              },
              {
                offset: 1,
                color: tinycolor('#1FE79A').setAlpha(1).toString()
              }
            ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: tinycolor('#1FE7E7').setAlpha(0.8).toString()
              },
              {
                offset: 1,
                color: tinycolor('#1FE7E7').setAlpha(0.01).toString()
              }
            ]), '#008CFF', '#1FE7E7', '#D4FF69', '#c4ebad'
          ],
          backgroundColor: 'rgba(0,0,0,0)',
          textStyle: {},
          title: {
            textStyle: { color: '#333333' },
            subtextStyle: { color: '#aaaaaa' }
          },
          line: {
            itemStyle: { borderWidth: '2' },
            lineStyle: { width: '3' },
            symbolSize: '8',
            symbol: 'emptyCircle',
            smooth: true,
            // areaStyle: {},
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: tinycolor('#1FE7E7').setAlpha(0.8).toString()
                },
                {
                  offset: 1,
                  color: tinycolor('#1FE7E7').setAlpha(0.01).toString()
                }
              ])
            }
          },
          radar: {
            itemStyle: { borderWidth: '2' },
            lineStyle: { width: '3' },
            symbolSize: '8',
            symbol: 'emptyCircle',
            smooth: false
          },
          bar: {
            itemStyle: {
              barBorderWidth: 0,
              barBorderColor: '#ccc'
            }
          },
          pie: {
            show: true, // 是否显示指示线
            length: 10, // 指示线长度，可以是负数
            // length2: 30, // 第二段指示线长度，可以配合length一起使用，控制线条形状
            lineStyle: {
              color: '#333', // 指示线颜色
              width: 1, // 线宽
              type: 'solid', // 线条类型，可选'solid', 'dashed', 'dotted'
              shadowBlur: 0, // 阴影模糊大小
              shadowColor: 'rgba(0, 0, 0, 0)', // 阴影颜色
              shadowOffsetX: 0, // 阴影水平偏移
              shadowOffsetY: 0 // 阴影垂直偏移
            },
            itemStyle: {
              show: true,
              borderWidth: 1,
              borderColor: '#ffffff'
            }
          },
          scatter: {
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ccc'
            }
          },
          boxplot: {
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ccc'
            }
          },
          parallel: {
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ccc'
            }
          },
          sankey: {
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ccc'
            }
          },
          funnel: {
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ccc'
            }
          },
          gauge: {
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ccc'
            }
          },
          candlestick: {
            itemStyle: {
              color: '#c12e34',
              color0: '#2b821d',
              borderColor: '#c12e34',
              borderColor0: '#2b821d',
              borderWidth: 1
            }
          },
          graph: {
            itemStyle: {
              borderWidth: 0,
              borderColor: '#ccc'
            },
            lineStyle: {
              width: 1,
              color: '#aaaaaa'
            },
            symbolSize: 4,
            symbol: 'emptyCircle',
            smooth: false,
            color: [
              '#c12e34',
              '#e6b600',
              '#0098d9',
              '#2b821d',
              '#005eaa',
              '#339ca8',
              '#cda819',
              '#32a487'
            ],
            label: { color: '#eeeeee' }
          },
          map: {
            itemStyle: {
              areaColor: '#ddd',
              borderColor: '#eee',
              borderWidth: 0.5
            }
            // label: { color: '#c12e34' },
            // emphasis: {
            //     itemStyle: {
            //         areaColor: '#e6b600',
            //         borderColor: '#ddd',
            //         borderWidth: 1,
            //     },
            //     label: { color: '#c12e34' },
            // },
          },
          geo: {
            itemStyle: {
              areaColor: '#ddd',
              borderColor: '#eee',
              borderWidth: 0.5
            },
            label: { color: '#c12e34' },
            emphasis: {
              itemStyle: {
                areaColor: '#e6b600',
                borderColor: '#ddd',
                borderWidth: 1
              },
              label: { color: '#c12e34' }
            }
          },
          categoryAxis: {
            axisLine: {
              show: true,
              lineStyle: { color: '#fff' }
            },
            axisTick: {
              show: true,
              lineStyle: { color: '#fff' }
            },
            axisLabel: {
              show: true,
              color: '#fff'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: [
                  '#ccc'
                ]
              }
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: [
                  'rgba(250,250,250,0.3)',
                  'rgba(200,200,200,0.3)'
                ]
              }
            }
          },
          valueAxis: {
            axisLine: {
              show: true,
              lineStyle: { color: '#ffffff' }
            },
            axisTick: {
              show: true,
              lineStyle: { color: '#ffffff' }
            },
            axisLabel: {
              show: true,
              color: '#ffffff'
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: [
                  '#ccc'
                ]
              }
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: [
                  'rgba(250,250,250,0.3)',
                  'rgba(200,200,200,0.3)'
                ]
              }
            }
          },
          logAxis: {
            axisLine: {
              show: true,
              lineStyle: { color: '#333' }
            },
            axisTick: {
              show: true,
              lineStyle: { color: '#333' }
            },
            axisLabel: {
              show: true,
              color: '#333'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: [
                  '#ccc'
                ]
              }
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: [
                  'rgba(250,250,250,0.3)',
                  'rgba(200,200,200,0.3)'
                ]
              }
            }
          },
          timeAxis: {
            axisLine: {
              show: true,
              lineStyle: { color: '#333' }
            },
            axisTick: {
              show: true,
              lineStyle: { color: '#333' }
            },
            axisLabel: {
              show: true,
              color: '#333'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: [
                  '#ccc'
                ]
              }
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: [
                  'rgba(250,250,250,0.3)',
                  'rgba(200,200,200,0.3)'
                ]
              }
            }
          },
          toolbox: {
            iconStyle: { borderColor: '#06467c' },
            emphasis: { iconStyle: { borderColor: '#4187c2' }}
          },
          legend: {
            show: true,
            type: 'scroll',
            x: 'center',
            y: 'top',
            icon: 'circle',
            orient: 'horizontal',
            textStyle: {
              color: '#ffffff',
              fontSize: 18
            },
            itemHeight: 15,
            itemWidth: 15,
            pageTextStyle: { color: '#ffffff' }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: 'rgba(33 ,96 ,180,0.5)',
                width: 1
              },
              crossStyle: {
                color: 'rgba(33 ,96 ,180,0.5)',
                width: 1
              }
            },
            borderColor: 'transparent', // 边框颜色
            borderWidth: 1, // 边框宽度
            backgroundColor: 'rgba(33 ,96 ,180,0.5)', // 背景颜色，可以是颜色值或颜色渐变
            textStyle: { // 文字样式
              color: '#ffffff', // 文字颜色
              fontSize: 14, // 可选，字体大小
              fontWeight: 'bold', // 可选，字体粗细
              fontFamily: 'Arial, sans-serif' // 可选，字体类型
            }
          },
          timeline: {
            lineStyle: {
              color: '#005eaa',
              width: 1
            },
            itemStyle: {
              color: '#005eaa',
              borderWidth: 1
            },
            controlStyle: {
              color: '#005eaa',
              borderColor: '#005eaa',
              borderWidth: 0.5
            },
            checkpointStyle: {
              color: '#005eaa',
              borderColor: '#316bc2'
            },
            label: { color: '#005eaa' },
            emphasis: {
              itemStyle: { color: '#005eaa' },
              controlStyle: {
                color: '#005eaa',
                borderColor: '#005eaa',
                borderWidth: 0.5
              },
              label: { color: '#005eaa' }
            }
          },
          visualMap: {
            color: [
              '#1790cf',
              '#a2d4e6'
            ]
          },
          dataZoom: {
            backgroundColor: 'rgba(47,69,84,0)',
            dataBackgroundColor: 'rgba(47,69,84,0.3)',
            fillerColor: 'rgba(167,183,204,0.4)',
            handleColor: '#a7b7cc',
            handleSize: '100%',
            textStyle: { color: '#333333' }
          },
          markPoint: {
            label: { color: '#eeeeee' },
            emphasis: { label: { color: '#eeeeee' }}
          }
        }
}
echarts.registerTheme('theme', theme.themeD)
